import React from 'react'

import './Footer.css'
import { useSelector, useDispatch } from 'react-redux'
import slice from '../../redux/slice'
const { allCheck, clearAllDone } = slice.actions
export default function Footer() {
  const todos = useSelector((state) => {
    return state.zs.todos
  })

  const dispatch = useDispatch()

  // 根据数据计算个数
  const allTotal = todos.length
  const doneTotal = todos.filter((item) => item.isDone).length
  return (
    <div className="todo-footer">
      <label>
        <input
          type="checkbox"
          checked={allTotal === doneTotal}
          onChange={(e) => {
            dispatch(allCheck(e.target.checked))
          }}
        />
      </label>
      <span>
        <span>已完成 {doneTotal}</span> / 全部 {allTotal}
      </span>
      <button
        className="btn btn-danger"
        onClick={() => {
          dispatch(clearAllDone())
        }}
      >
        清除已完成任务
      </button>
    </div>
  )
}
